import '../../assets/css/floor.css'
import React,{useState,useEffect} from 'react'
import {Button,Input,Table,Pagination,Modal,message,Image, Steps,Upload} from 'antd'
import getImg from '../../assets/js/getImg';
import { getAll,postAll,delAll,getName } from '../../api/build';
import {LoadingOutlined ,CheckOutlined ,ExclamationCircleOutlined,PlusOutlined ,CloseOutlined} from '@ant-design/icons'
const { TextArea } = Input;
export default function Buildings() {
  useEffect(()=>{
    getAll().then(res=>{
        setData(res.data.data)
       
          setBox(true)
       
    })
  },[])
  const [getBuilding,setGetBuilding] = useState('')
const [box, setBox] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [shutDown, setShutDown] = useState(false);
const [isModalOne, setIsModalOne] = useState(false);
const [value,setValue]= useState('');
const [Building,setBuilding]= useState('');
const [BuildingInfo,setBuildingInfo]= useState('');
const [value1,setValue1]= useState('');
const [current, setCurrent] = useState(0);
const [above, setAbove] = useState(0);
const aboveList = Array.from({ length: above }, (_, index) => `${index + 1}`);
const [under, setUnder] = useState(0);
const underList = Array.from({ length: under }, (_, index) => ` ${index + 1}`);
let [data,setData] = useState([])
const [fileList, setFileList] = useState([])
const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState('');
const [look, setLook] = useState({});
const aboveLook = Array.from({ length: look.top }, (_, index) => ` ${index + 1}`);
const underLook = Array.from({ length: look.bottom }, (_, index) => ` ${index + 1}`);
const [tab, setTab] = useState(0);
const handlePreview = async (file) => {
  setPreviewImage(file.url || file.preview);
  setPreviewOpen(true);
};
const handleChange = ({ fileList: newFileList }) =>{

  
  setFileList(newFileList);
} 
const uploadButton = (
  <button
    style={{
      border: 0,
      background: 'none',
    }}
    type="button"
  >
    <div className='w-rotundity-icon'><PlusOutlined /></div>
    
    <div
      style={{
        marginTop: 8,
      }}
    >
      添加图片
    </div>
  </button>
);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
    message.open({
      type: 'success',
      content: '删除成功',
    });
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    setIsModalOne(false)
    setCurrent(0)
    setAbove(0)
    setUnder(0)
    message.open({
      type: 'success',
      content: '取消成功',
    });
  };

  const itemRender = (_, type, originalElement) => {

    
    if (type === 'prev') {
      return <a className='w-a'>上一页</a>;
    }
    if (type === 'next') {
      return <a className='w-a'>下一页</a>;
    }
    return originalElement;
  };
  const customDot = (dot, { status, index }) =>
  (

    (status == 'finish'? <div className='w-icon'><CheckOutlined  /></div> : status == 'wait'? <div className='w-icon-no'></div> : <div className='w-icon'><LoadingOutlined  /></div>)
  );
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      align:'center',
      render:(item,row)=>{

          return(
            <div className='w-dis'>
            <Image  src={row.imgurl}   alt="" /> 
            <p>{row.name}</p>
            </div>
          )
      }
    },
    {
      title: '详细地址',
      align:'center',
      width:800,
      dataIndex: 'address',
      key: 'address',
    },
   {
    title: '操作',
    align:'center',
    height:60,
    key:'id',
    render:(text, record, index)=>{
      return(
        <div className='w-operate'>
        <img  onClick={(e)=>{ 
          console.log(text.id);
          setLook(text)
          setShutDown(true) 
        }}  src={getImg('/src/assets/images/xiugai.png')} width={16} height={16} alt="" /> 
        <img onClick={()=>{
          setLook(text)
          showModal()
        }} className='w-oneimg' src={getImg('/src/assets/images/lajitong.png')} alt="" width={18} height={20}/>
        </div>
      )
  }
   }
  ];


  return (
    <div className='Buildings'>
      <Button className='w-but' onClick={()=>{
        setIsModalOne(true)
      }}>新建楼宇</Button>
      <div className={box?'':'w-no-box'}>
      <div className='w-tilte'>
        <Input className='w-inp' value={getBuilding} placeholder='请输入楼宇名称' onChange={(e)=>{
        setGetBuilding(e.target.value)
        }}></Input> 
        <Button className='w-but' 
        onClick={()=>{
          getName(getBuilding).then(res=>{
            setData(res.data.data)
          })
        }}>查询</Button>
        <Button style={{width:96,height:32}} color="default" variant="filled" onClick={()=>{
          setGetBuilding('')
          getAll().then(res=>{
            setData(res.data.data)
        })
        }}>
            清除
          </Button>
      </div>
      <div className='w-table'>
      <Table pagination={false} align='center'  dataSource={data} columns={columns} scroll={{
        scrollToFirstRowOnChange:true,
        y:450,
        x:1185
      }}/>
      </div>
      <div className='w-foolbox'>
         <Pagination
         align='end'
    total={data.length}
    showSizeChanger={false}
    showQuickJumper
    showTotal={(total) => `共 ${total} 条记录,每页10条`}
    itemRender={itemRender}
     onChange={(page)=>{
     }}
  />
        <Modal width={308} centered closable={false} footer={ null} open={isModalOpen}  onCancel={handleCancel} >
          <div className='w-big-mo'>
       <div className='w-tex'>此操作是不可恢复的!</div>
       <div className='w-tex'>您确定要执行此操作么?</div>
       <div className='w-but-box'>
        <Button className='w-yes' onClick={()=>{
          delAll(look.id).then(res=>{
            
            console.log(res);
            getAll().then(res=>{
              setData(res.data.data)
          })
          })
          handleOk()
          console.log(look.id);
          
        }}>确定</Button>
        <Button className='w-no' onClick={()=>{
          handleCancel()
        }}>取消</Button>
       </div>
       </div>
      </Modal>
      </div>
    </div>
    <div className={box?'w-no-box':'w-yes-big'}>
      <div>
        <img className='w-noll' src={getImg('/src/assets/images/weitu1.jpg')} alt="" />
        <p>项目下未创建楼宇～</p>
      </div>
    </div>
   
      <Modal width={560} centered closable={false} footer={ null} open={isModalOne}  onCancel={handleCancel} >
      <Steps
    current={current}
    progressDot={customDot}
    className='w-steps'
    items={[
      {
        title: '基础信息',
        
      },
      {
        title: '楼宇图片',
        
      },
      {
        title: '楼层',
       
      },
     
    ]}
  />
  <div className={current==0?'':"w-no-box"}>
 <div className='w-inp-name'>*<span>楼宇名称</span></div>
 <Input className='w-building' value={Building} onChange={(e)=>{
  setBuilding(e.target.value)
 }} placeholder='请输入'></Input>
 <div className='w-inp-name'>*<span>详细地址</span></div>
 <Input className='w-building' onChange={(e)=>{
setBuildingInfo(e.target.value)
 }} value={BuildingInfo} placeholder='请输入'></Input>
 <div className='w-inp-name'><span>楼宇简介</span></div>
 <TextArea
        className='w-text-name'
        value={value}
        onChange={(e) => setValue(e.target.value)}

        
      />
      <div className='w-inp-name'><span>运营方简介</span></div>
 <TextArea
        className='w-text-name'
        value={value1}
        onChange={(e) => setValue1(e.target.value)}
      />
      </div>
      <div className={current==1?'w-no-box-two':"w-no-box"}>
        <div className='w-excl'><ExclamationCircleOutlined /><p>最多可上传9张，支持jpg,png,jpeg格式,单张不超过2M</p></div>
        <Upload
        action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
        listType="picture-card"
        fileList={fileList}
        onPreview={handlePreview}
        onChange={handleChange}
        maxCount={9}
        onRemove ={(e)=>{
          
        }}
      >
        {fileList.length >= 9 ? null : uploadButton}
      </Upload>
      {previewImage && (
        <Image
          wrapperStyle={{
            display: 'none',
          }}
          preview={{
            visible: previewOpen,
            onVisibleChange: (visible) => setPreviewOpen(visible),
            afterOpenChange: (visible) => !visible && setPreviewImage(''),
          }}
          src={previewImage}
        />
      )}
      </div>
      <div className={current==2?'w-no-box-two':"w-no-box"}>
        <p className='w-Building-configuration'>楼层配置</p>
        <div className='w-counter-box'>
            <div className='w-counter-left'>
              地上 
              <button className='w-counter-but' onClick={()=>{
                if(above>0){
                   setAbove(above-1)
                   return; 
                }
                message.open({
                  type: 'error',
                  content: '地上层数不能小于0',
                });
              }}>-</button>
              <div className='w-counter-inp'>
                <Input style={{paddingLeft:10}} value={above}  type="text" onChange={(e)=>{
                setAbove(Number(e.target.value))
              }}/>
              </div>
              <button className='w-counter-but' onClick={()=>{
                 setAbove(above+1)
              }}>+</button>
              层
            </div>
            <div className='w-counter-left'>
              地下 
              <button className='w-counter-but' onClick={()=>{
                  if(under>0){
                    setUnder(under-1)
                    return; 
                  }
                  message.open({
                    type: 'error',
                    content: '地下层数不能小于0',
                  });
              }}>-</button>
              <div className='w-counter-inp'><Input value={under}  type="text" onChange={(e)=>{
                 setUnder(Number(e.target.value))
              }}/></div>
              <button className='w-counter-but' onClick={()=>{
                 setUnder(under+1)
              }}>+</button>
              层
            </div>
        </div>

            <div className='w-display-big-box'>
              <div className='w-null' style={{overflow:"auto",height:240,marginTop:30}}>
              {aboveList.map(item=>(
                <div className='w-map-for' key={item}>
                  <p> 地上</p>
                  <div className='w-display'><p>{item}</p>层</div>
                  <div className='w-del' onClick={()=>{
                   setAbove(above-1)
                  }}><CloseOutlined /></div>
                </div>
              ))}
              </div>
              <div className='w-null' style={{overflow:"auto",height:240,marginTop:30}}>
              {underList.map(item=>(
                <div className='w-map-for' key={item}>
                  <p> 地下</p>
                  <div className='w-display'><p>{item}</p>层</div>
                  <div className='w-del' onClick={()=>{
                   setUnder(under-1)
                  }}><CloseOutlined /></div>
                </div>
              ))}
              </div>
            </div>

      </div>
      <div className='w-building-box'>
      <Button className={ current !=0 ?'w-building-no':'w-no-box'} onClick={()=>{
        if(current==0){

        }else if(current>0){
          setCurrent(current - 1);
        }
   
    
     }}>上一步</Button>
      <Button onClick={()=>{
        if(current==2){
          postAll(Building,BuildingInfo,value,value1,above,under).then(res=>{
            console.log(res);
            getAll().then(res=>{
              setData(res.data.data)
              setBox(true)
          })
          })
          setCurrent(0)
          setIsModalOne(false)
          setBuilding('')
          setBuildingInfo('')
          setValue('')
          setValue1('')
          setAbove(0)
          setUnder(0)
          message.open({
            type: 'success',
            content: '新建楼宇成功',
          });
          return
        }
    setCurrent(current + 1);
    
     }}>{current==2?"完成":"下一步"}</Button>
   
      </div>

      </Modal>
      <div className={shutDown?'w-MyModel':'w-dis-none'}>
          <div className='w-opacity' onClick={()=>{
            setShutDown(false)
            setTab(0)
          }}></div>
          <div className='w-have-icon'>
            <div className='w-icon-box' onClick={()=>{
            setShutDown(false)
            setTab(0)
          }}><CloseOutlined /></div>
          <div className='w-white-box'>
              <div className='w-white-title'>
                <p>{look.name}</p>
                <div style={{display:'flex'}}>
                  <div className='w-white-edit'>编辑</div>
                <div className='w-white-edl' onClick={()=>{
                    
                    setIsModalOpen(true)
                }}>删除</div>
                </div>
              </div>

              <div className='w-capsule'>
                <div onClick={()=>{setTab(0)}} className={tab==0?'w-col-847':'w-capsule-text'}>基础信息</div>
                <span className='w-solid'></span>
                <div onClick={()=>{setTab(1)}} className={tab==1?'w-col-847':'w-capsule-text'}>楼层</div>
              </div>

              <div className={tab==0?'w-but-tab-box':'w-dis-none'}>
                  <p className='w-but-tab-p'>所属项目</p>
                  <div style={{
                    marginTop:14
                  }} className='w-ma-top'>北京国贸项目</div>
                  <p className='w-but-tab-p'>项目地址</p>
                  <div style={{
                    marginTop:14
                  }} className='w-ma-top'>{look.address}</div>
                  <p className='w-but-tab-p'>楼宇简介</p>
                  <div style={{
                    marginTop:14,
                    fontSize:14
                  }} className='w-ma-top'>{look.intro}</div>
                  <p className='w-but-tab-p'>运营方介绍</p>
                  <div style={{
                    
                    fontSize:14
                  }} className='w-ma-top'>{look.yunyingintro}</div>
                  <div className='w-image-box'>
                          <img className='w-image' src="https://tse1-mm.cn.bing.net/th/id/OIP-C.OLb-IYVPZn6oW3ENsMZKOQHaNK?rs=1&pid=ImgDetMain" alt="" />
                          <img className='w-image' src="https://tse4-mm.cn.bing.net/th/id/OIP-C.cFBCcn50HyD2k2cz_RuJkgHaLG?w=115&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="" />
                  </div>
                 
              </div>
              <div className={tab==1?'w-but-tab-box w-hit':'w-dis-none'}>
                    地上{look.top}层,地下{look.bottom}层
                    <div style={{display:'flex'}}>
                  <div className='w-look-box'>
                  {aboveLook.map(item=>(
                <div className='w-map-for' key={item}>
                  <p> 地上</p>
                  <div style={{
                    display:'flex'
                  }}><p>{item}</p>层</div>
                  <p></p>
                </div>
              ))}
              </div>
              <div className='w-look-box'>
                 {underLook.map(item=>(
                <div className='w-map-for' key={item}>
                  <p> 地下</p>
                  <div style={{
                    display:'flex'
                  }}><p>{item}</p>层</div>
                  <p></p>
                </div>
              ))}
                  </div>
                  </div>
              </div>
              <div style={{
                    display:'flex',
                    paddingLeft:30,
                  }}>
                    <p style={{
                      marginRight:30
                    }}>创建人:李明海</p>
                    <p>创建时间:2019-08-20 10:30:28</p>
                  </div>
          </div>
          </div>
      </div>
    </div>
  )
}
